
<template>
    <el-dialog
    v-model="isShow"
        width="60%"
        style="height:620px"
        :destroy-on-close="true"
        >
        <template #header="{ close, titleClass }">
            <h4 :class="titleClass">选择派警人员</h4>
        </template>
        <div class="">
            <el-row :gutter="20" style="height: 100%">
                <el-col :span="span2" style="height: 440px;">
                    <el-row :gutter="20" style="height: 100%;">
                        <!--人员数据-->
                        <el-col :span="12">
                            <el-card>
                                <template #header>
                                <div class="card-header">
                                    <span style="line-height: 30px;">警务人员列表</span>
                                </div>
                                </template>
                                <el-tree
                                ref="fajingTree"
                                :data="fajingOptions"
                                show-checkbox
                                node-key="userId"
                                :props="{ label: 'userName'}"
                                :default-checked-keys="defaultCheckedData"
                                @check-change="handleCheckChangeFA"
                            />
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card>
                                <template #header>
                                <div class="card-header">
                                    <span style="line-height: 30px;">辅警人员列表</span>
                                </div>
                                </template>
                                <el-tree
                                    ref="fujingTree"
                                    node-key="userId"
                                    :default-checked-keys="defaultCheckedData"
                                    :data="fujingOptions"
                                    show-checkbox
                                    :props="{ label: 'userName'}"
                                    @check-change="handleCheckChangeFU"
                                />
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24" style="text-align: right;">
                    <el-button type="primary" @click="confirm" >确认</el-button>
                    <el-button @click="cancel" >全部取消</el-button>
                    <el-button @click="isShow = false" >关闭</el-button>
                </el-col>
            </el-row>
        
        </div>
    </el-dialog>
 </template>
 
 <script setup>
 import {getCurrentInstance} from "vue";
  const {proxy} = getCurrentInstance();

 import {getPoliceListApi,getPoliceAssistantListApi} from "@/api/Police.js";


 const span1 = 0
 const span2 = 24
 const isShow = ref(false);
 const fajingTree = ref({});
 const fujingTree = ref({});
 const defaultCheckedData = ref([]);
 const isExpandAll = ref(true);
 const deptName = ref('');

 const fajingOptions = ref([]);
 const fujingOptions = ref([]);

 const selectedIdsFA = ref([]); // 用于保存选中的法警ID
 const selectedIdsFU = ref([]); // 用于保存选中的辅警ID

 const emit = defineEmits(['userlistIds'])
 
 const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const showSendPoliceSelectYouHua = async (DefaultCheck) => {
    // 这里更新 defaultCheckedData 是为了默认勾选传递过来的选项
    defaultCheckedData.value = DefaultCheck;
    
    // 重置 selectedIdsFA 和 selectedIdsFU，确保每次打开选择界面时与父组件同步
    selectedIdsFA.value = [];
    selectedIdsFU.value = [];
    
    // 将 DefaultCheck 中的 ID 分别加入 selectedIdsFA 和 selectedIdsFU
    DefaultCheck.forEach(id => {
        if (isPolice(id)) {  // 假设 isPolice 是一个判断 id 是否为法警的函数
            selectedIdsFA.value.push(id);
        } else if (isPoliceAssistant(id)) {  // 假设 isPoliceAssistant 是一个判断 id 是否为辅警的函数
            selectedIdsFU.value.push(id);
        }
    });
    getPoliceList()
    getPoliceAssistantList()
    cancel()
    changeShowStatus()
}
// 判断给定的 userId 是否是法警
const isPolice = (id) => {
    return fajingOptions.value.some(item => item.userId === id);
};

// 判断给定的 userId 是否是辅警
const isPoliceAssistant = (id) => {
    return fujingOptions.value.some(item => item.userId === id);
};
const getPoliceList = async () => {
    await getPoliceListApi().then(res => {
        fajingOptions.value = res.data
    })
}
const getPoliceAssistantList = async () => {
    await getPoliceAssistantListApi().then(res => {
        fujingOptions.value = res.data
    })
}
const handleCheckChangeFA = async (node, checked) => {
// 当用户点击复选框时，更新选中的ID数组
    if (checked) {
        if (!selectedIdsFA.value.includes(node.userId)) {
        // 检查是否已存在，避免重复添加
        selectedIdsFA.value.push(node.userId);
        }
    } else {
        selectedIdsFA.value = selectedIdsFA.value.filter(id => id !== node.userId);
    }
}
const handleCheckChangeFU = async (node, checked) => {
// 当用户点击复选框时，更新选中的ID数组
    if (checked) {
            if (!selectedIdsFU.value.includes(node.userId)) {
            // 检查是否已存在，避免重复添加
            selectedIdsFU.value.push(node.userId);
            }
        } else {
            selectedIdsFU.value = selectedIdsFU.value.filter(id => id !== node.userId);
        }
}
const confirm = async () => {
    if (selectedIdsFA.value.length === 0) {
        proxy.$modal.msgError(`至少选择一个法警部门人员`)
        return;
    }
    const selectedIdsAll = [...new Set([...selectedIdsFA.value, ...selectedIdsFU.value])]; // 合并并去重
    emit('userlistIds', selectedIdsAll); // 传递给父组件
    isShow.value = false; // 关闭弹窗
}
const cancel = async () => {
    defaultCheckedData.value = [];
    selectedIdsFA.value = []
    selectedIdsFU.value = []
    if (fajingTree.value) {
        fajingTree.value.setCheckedKeys([]);  // 取消所有选中
    }
    if (fujingTree.value) {
        fujingTree.value.setCheckedKeys([]);  // 取消所有选中
    }
    const selectedIdsAll = [...new Set([...selectedIdsFA.value, ...selectedIdsFU.value])]; // 合并并去重
    emit('userlistIds', selectedIdsAll); // 传递给父组件
}
defineExpose({showSendPoliceSelectYouHua,confirm})

 </script>
 <style scoped>
 h4{margin: 5px 0;}
:deep() .el-card{
    height: 100%;
}
</style>